/*
  WSP KPI Tiles
  Version: 1.0.1
  Author: Web Seller Pro Ltd
  Copyright (c) 2023 Web Seller Pro Ltd. All rights reserved.
*/

.wsp-kpi-grid { width: 100%; position: relative;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
}
.wsp-kpi-grid > .wsp-kpi-grid-row {  font-size: 0; }
.wsp-kpi-grid > .wsp-kpi-grid-row > div { height: 100px; display: inline-block; padding: 2px; box-sizing: border-box; }
.wsp-kpi-grid > .wsp-kpi-grid-row > div > div { width: 100%; height: 100%; background: #fbfbfb; position: relative; cursor: pointer; }
.wsp-kpi-grid > .wsp-kpi-grid-row > div > div:hover:before { content: "+"; color: #9b9b9b; font-weight: bold; font-size: initial; display: inline-block; width: 100%; top: 0; margin-top: 12%; position: absolute; text-align: center; }
.wsp-kpi-grid > .wsp-kpi-grid-row > div > div.dropping { background: #d3d3d3; }
.wsp-kpi-grid .wsp-kpi-tiles { position: absolute; top: 0; left: 0; width: 100%; }

/*.wsp-kpi-tile[grid-x="1"] { left: 0%; }
.wsp-kpi-tile[grid-x="2"] { left: 12.5%; }
.wsp-kpi-tile[grid-x="3"] { left: 25%; }
.wsp-kpi-tile[grid-x="4"] { left: 37.5%; }
.wsp-kpi-tile[grid-x="5"] { left: 50%; }
.wsp-kpi-tile[grid-x="6"] { left: 62.5%; }
.wsp-kpi-tile[grid-x="7"] { left: 75%; }
.wsp-kpi-tile[grid-x="8"] { left: 87.5%; }
.wsp-kpi-tile[grid-x="9"] { left: 100%; }
.wsp-kpi-tile[grid-x="10"] { left: 12.5%; }
.wsp-kpi-tile[grid-x="11"] { left: 12.5%; }
.wsp-kpi-tile[grid-x="12"] { left: 12.5%; }*/

.wsp-kpi-tile[grid-y="1"] { top: 0; }
.wsp-kpi-tile[grid-y="2"] { top: 100px; }
.wsp-kpi-tile[grid-y="3"] { top: 200px; }
.wsp-kpi-tile[grid-y="4"] { top: 300px; }
.wsp-kpi-tile[grid-y="5"] { top: 400px; }
.wsp-kpi-tile[grid-y="6"] { top: 500px; }
.wsp-kpi-tile[grid-y="7"] { top: 600px; }
.wsp-kpi-tile[grid-y="8"] { top: 700px; }
.wsp-kpi-tile[grid-y="9"] { top: 800px; }
.wsp-kpi-tile[grid-y="10"] { top: 900px; }
.wsp-kpi-tile[grid-y="11"] { top: 1000px; }
.wsp-kpi-tile[grid-y="12"] { top: 1100px; }

/*.wsp-kpi-tile[grid-w="1"] { width: 12.5%; }
.wsp-kpi-tile[grid-w="2"] { width: 25%; }
.wsp-kpi-tile[grid-w="3"] { width: 37.5%; }
.wsp-kpi-tile[grid-w="4"] { width: 50%; }
.wsp-kpi-tile[grid-w="5"] { width: 62.5%; }
.wsp-kpi-tile[grid-w="6"] { width: 75%; }
.wsp-kpi-tile[grid-w="7"] { width: 87.5%; }
.wsp-kpi-tile[grid-w="8"] { width: 100%; }
.wsp-kpi-tile[grid-w="9"] { width: 75%; }
.wsp-kpi-tile[grid-w="10"] { width: 75%; }*/

.wsp-kpi-tile[grid-h="1"] { height: 100px; }
.wsp-kpi-tile[grid-h="1"] .primary, .wsp-kpi-tile[grid-h="1"] .secondary { font-size: 100%; }
.wsp-kpi-tile[grid-h="2"] { height: 200px; }
.wsp-kpi-tile[grid-h="2"] .primary, .wsp-kpi-tile[grid-h="2"] .secondary { font-size: 130%; }
.wsp-kpi-tile[grid-h="3"] { height: 300px; }
.wsp-kpi-tile[grid-h="3"] .primary, .wsp-kpi-tile[grid-h="3"] .secondary { font-size: 150%; }
.wsp-kpi-tile[grid-h="4"] { height: 400px; }
.wsp-kpi-tile[grid-h="4"] .primary, .wsp-kpi-tile[grid-h="4"] .secondary { font-size: 200%; }
.wsp-kpi-tile[grid-h="5"] { height: 500px; }
.wsp-kpi-tile[grid-h="5"] .primary, .wsp-kpi-tile[grid-h="5"] .secondary { font-size: 200%; }
.wsp-kpi-tile[grid-h="6"] { height: 600px; }
.wsp-kpi-tile[grid-h="6"] .primary, .wsp-kpi-tile[grid-h="6"] .secondary { font-size: 200%; }
.wsp-kpi-tile[grid-h="7"] { height: 700px; }
.wsp-kpi-tile[grid-h="7"] .primary, .wsp-kpi-tile[grid-h="7"] .secondary { font-size: 200%; }
.wsp-kpi-tile[grid-h="8"] { height: 800px; }
.wsp-kpi-tile[grid-h="8"] .primary, .wsp-kpi-tile[grid-h="8"] .secondary { font-size: 200%; }
.wsp-kpi-tile[grid-h="9"] { height: 900px; }
.wsp-kpi-tile[grid-h="9"] .primary, .wsp-kpi-tile[grid-h="9"] .secondary { font-size: 200%; }
.wsp-kpi-tile[grid-h="10"] { height: 1000px; }
.wsp-kpi-tile[grid-h="10"] .primary, .wsp-kpi-tile[grid-h="10"] .secondary { font-size: 200%; }
.wsp-kpi-tile[grid-h="11"] { height: 1100px; }
.wsp-kpi-tile[grid-h="11"] .primary, .wsp-kpi-tile[grid-h="11"] .secondary { font-size: 200%; }
.wsp-kpi-tile[grid-h="12"] { height: 1200px; }
.wsp-kpi-tile[grid-h="12"] .primary, .wsp-kpi-tile[grid-h="12"] .secondary { font-size: 200%; }

.wsp-kpi-tile .ui-resizable-n { position: absolute; height: 4px; width: 100%; top: 0; left:0; cursor: n-resize; }
.wsp-kpi-tile .ui-resizable-s { position: absolute; height: 4px; width: 100%; bottom: 0; left:0; cursor: s-resize; }
.wsp-kpi-tile .ui-resizable-e { position: absolute; width: 4px; height: 100%; right: 0; top: 0; cursor: e-resize; }
.wsp-kpi-tile .ui-resizable-w { position: absolute; width: 4px; height: 100%; left: 0; top: 0; cursor: w-resize; }
.wsp-kpi-tile.ui-resizable-resizing .wsp-kpi-tile-container { border-style: dashed; border-width: 2px; }


.wsp-kpi-tile {
    position: absolute;
    z-index: 0;
}
.wsp-kpi-tile > div.wsp-kpi-tile-container {
    min-height: 100px;
    height: 100%;
    background-color: none;
    border: 1px solid rgb(0,0,0,0.1);
    border-bottom: rgb(0,0,0,0.2) 2px solid;
    border-radius: 2px;
    padding: 5px;
    margin: 1px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.wsp-kpi-tile[configid] { z-index: 1; }
.wsp-kpi-tile[rendered="false"]:before {content: url('/imgs/loading-small.gif'); color: #ca3c3c; text-align: center; display: block; position: absolute; width: 100%; top: 40%; z-index: 1; }
.wsp-kpi-tile[rendered="error"]:before {content: "\00D7"; color: #ca3c3c; font-size: 500%; font-weight: 800; text-align: center; display: block; position: absolute; width: 100%; top: 2%; }

.wsp-kpi-tile .tools { position: absolute; top: 0; left: 0; width: 100%; color: inherit; opacity: 0; }
.wsp-kpi-tile:hover .tools { opacity: 0.6; }
.wsp-kpi-tile .tools > a { color: inherit; text-decoration: none; padding: 2px; border-radius: 3px; position: absolute; width: 25px; height: 25px; text-align: center; vertical-align: middle; }
.wsp-kpi-tile .tools > a:hover { background-color: rgb(255,255,255,0.8); opacity: 1.0 }
.wsp-kpi-tile .tools .edit-btn { right: 0;}
.wsp-kpi-tile .tools .edit-btn:before { content: "\270E"; color: inherit; font-size: 140%; -webkit-transform: scaleX(-1); transform: scaleX(-1); }
.wsp-kpi-tile .tools .move-btn:before { content: "\2725"; color: inherit; font-size: 140%; }

.wsp-kpi-tile .primary .primary-lbl, .wsp-kpi-tile .primary .primary-val, .wsp-kpi-tile .secondary .secondary-lbl, .wsp-kpi-tile .secondary .secondary-val { white-space: nowrap; display: flex; align-items: center; justify-content: center; }

.wsp-kpi-tile .primary, .wsp-kpi-tile .secondary { white-space: nowrap; overflow: hidden; }


.wsp-kpi-tile[tile-type='default'] .primary { text-align: center; }
.wsp-kpi-tile[tile-type='default'] .primary .primary-lbl { font-size: 120%; background: rgb(0,0,0,0.07); }
.wsp-kpi-tile[tile-type='default'] .primary .primary-lbl::before { content: '\00a0 '; }
.wsp-kpi-tile[tile-type='default'] .primary .primary-val { display: inline-block; width: 40%;font-size: 250%; margin: 8px 0; font-weight: bold; background: rgb(0,0,0,0.07); }
.wsp-kpi-tile[tile-type='default'] .primary .primary-val::before { content: '\00a0 '; }

.wsp-kpi-tile[tile-type='label-single'] { max-height: 400px; }
.wsp-kpi-tile[tile-type='label-single'] .primary { text-align: center; height: 100%; width: 100%; }
.wsp-kpi-tile[tile-type='label-single'] .primary .primary-lbl { font-size: 120%; height: 30%; }
.wsp-kpi-tile[tile-type='label-single'] .primary .primary-val { font-size: 250%; margin: 8px 0; font-weight: bold; height: 50%; }

.wsp-kpi-tile[tile-type='label-compare'] { max-height: 400px; }
.wsp-kpi-tile[tile-type='label-compare'] .primary { text-align: center; height: 80%; }
.wsp-kpi-tile[tile-type='label-compare'] .primary .primary-lbl { font-size: 120%; height: 30%; }
.wsp-kpi-tile[tile-type='label-compare'] .primary .primary-val { font-size: 250%; margin: 0; font-weight: bold; height: 60% }
.wsp-kpi-tile[tile-type='label-compare'] .secondary { text-align: center; height: 20%; display: flex; align-items: center; justify-content: center; }
.wsp-kpi-tile[tile-type='label-compare'] .secondary .secondary-lbl { display: inline-block; }
.wsp-kpi-tile[tile-type='label-compare'] .secondary .secondary-val { display: inline-block; margin: 0 6px; font-weight: bold; }

.wsp-kpi-tile[tile-type='breakeven'] { max-height: 200px; }
.wsp-kpi-tile[tile-type='breakeven'] .primary { text-align: center; height: 100%; }
.wsp-kpi-tile[tile-type='breakeven'] .primary .primary-lbl { display: inline-flex; font-size: 120%; height: 50%; }
.wsp-kpi-tile[tile-type='breakeven'] .primary .primary-val { display: inline-flex; height: 50%; font-size: 140%; font-weight: bold; display: inline-block; margin: 0 0 0 8px; }
.wsp-kpi-tile[tile-type='breakeven'] .primary-gauge { width: 100%; height: 50%; border: 1px solid rgb(0,0,0,0.4); border-width: 1px 0 1px 0; background-color: rgb(255,255,255,0.4); margin: 0; position: relative; }
.wsp-kpi-tile[tile-type='breakeven'] .primary-gauge .gauge-left, .wsp-kpi-tile[tile-type='breakeven'] .primary-gauge .gauge-right { position: absolute; height: 100%; background-color: green; }
.wsp-kpi-tile[tile-type='breakeven'] .primary-gauge .gauge-right { left: 50%; background-color: #1cb841; }
.wsp-kpi-tile[tile-type='breakeven'] .primary-gauge .gauge-left { right: 50%; background-color: #ca3c3c; }
.wsp-kpi-tile[tile-type='breakeven'] .primary-gauge .min, .wsp-kpi-tile[tile-type='breakeven'] .primary-gauge .max, .wsp-kpi-tile[tile-type='breakeven'] .primary-gauge .mid-val {
    position: absolute;   
    font-size: 90%;
    top: 35%;
}
.wsp-kpi-tile[tile-type='breakeven'] .primary-gauge .min { left: 0px; border-width: 0 0 0 1px; text-align: left; padding-left: 4px; }
.wsp-kpi-tile[tile-type='breakeven'] .primary-gauge .max { right: 0px; border-width: 0 1px 0 0; text-align: right; padding-right: 4px; }
.wsp-kpi-tile[tile-type='breakeven'] .primary-gauge .mid { position: absolute; right: 50%; border: 1px solid rgb(0,0,0,0.4); border-width: 0 0 0 2px; height: 100%; }
.wsp-kpi-tile[tile-type='breakeven'] .primary-gauge .mid-val { border: 0; width: 100%; }

.wsp-kpi-tile[tile-type^='trend'] { max-height: 500px; }
.wsp-kpi-tile[tile-type^='trend'] .primary { text-align: center; width: 100%; vertical-align: top; display: flex; align-items: center; justify-content: center; height: 30%; }
.wsp-kpi-tile[tile-type^='trend'][grid-h="2"] .primary { height: 18%; }
.wsp-kpi-tile[tile-type^='trend'][grid-h="3"] .primary { height: 15%; }
.wsp-kpi-tile[tile-type^='trend'][grid-h="4"] .primary { height: 11%; }
.wsp-kpi-tile[tile-type^='trend'][grid-h="5"] .primary { height: 11%; }
.wsp-kpi-tile[tile-type^='trend'] .primary .primary-lbl { font-size: 120%; }
.wsp-kpi-tile[tile-type^='trend'] .primary .primary-val { font-size: 140%; font-weight: bold; margin: 0 0 0 8px; }
.wsp-kpi-tile[tile-type^='trend'] .primary-trend { height: 70%; position: relative; background-size: 8.3333% 25%; background-image: linear-gradient(to right, rgb(100,100,100,0.2) 1px, transparent 1px), linear-gradient(to bottom, rgb(100,100,100,0.2) 1px, transparent 1px); background-color: #fff; }
.wsp-kpi-tile[tile-type^='trend'][grid-h="2"] .primary-trend { height: 85%; }
.wsp-kpi-tile[tile-type^='trend'][grid-h="3"] .primary-trend { height: 87%; }
.wsp-kpi-tile[tile-type^='trend'][grid-h="4"] .primary-trend { height: 90%; }
.wsp-kpi-tile[tile-type^='trend'][grid-h="5"] .primary-trend { height: 90%; }
.wsp-kpi-tile[tile-type^='trend'] .primary-trend .y-axis { position: absolute; border-left: 2px solid rgb(100,100,100,0.2); height: 100%; left: 0; backdrop-filter:invert(100%); }
.wsp-kpi-tile[tile-type^='trend'] .primary-trend .x-axis { position: absolute; border-bottom: 2px solid rgb(100,100,100,0.2); width: 100%; bottom: 0; backdrop-filter:invert(100%); }
.wsp-kpi-tile[tile-type^='trend'] .primary-trend .columns { width: 100%; height: 100%; }
.wsp-kpi-tile[tile-type^='trend'] .primary-trend .columns .bar { position: absolute; bottom: 0; box-sizing: border-box; border-radius: 2px 2px 0 0; opacity: 1; min-height: 2px; background-color: #ED7D31; }
.wsp-kpi-tile[tile-type^='trend'] .primary-trend .columns .bar:nth-child(12) { background-color: #1cb841; }
.wsp-kpi-tile[tile-type^='trend'] .primary-trend .columns .bar:hover { border: 2px solid rgb(255,255,255,0.5); border-width: 2px 2px 0 2px; }
.wsp-kpi-tile[tile-type^='trend'] .primary-trend .columns .point { position: absolute; border: 3px solid rgb(0,0,0,0); bottom: 0; width: 6px; height: 6px; margin-bottom: -2px; border-radius: 50%; box-sizing: border-box; opacity: 0.7; min-height: 1px; background-color: #3176aa; }
.wsp-kpi-tile[tile-type^='trend'] .primary-trend .columns .point:hover { border: 3px solid rgb(255,255,255,0.5); }
.wsp-kpi-tile[tile-type^='trend'] .primary-trend .columns .line { position: absolute; width: 10px; border: 2px solid rgb(0,0,0,0.5); }
.wsp-kpi-tile[tile-type^='trend'] .primary-trend .columns .nodata { position: absolute; bottom: 0; width: 100%; padding: 4px 0; font-size: 80%; opacity: 0.6; text-align: center; }

.wsp-kpi-tile[tile-type='gauge'] { max-height: 200px; }
.wsp-kpi-tile[tile-type='gauge'] .primary { text-align: center; display: inline-block; width: 60%; vertical-align: top; height: 100%; }
.wsp-kpi-tile[tile-type='gauge'] .primary .primary-lbl { font-size: 120%; height: 30%; }
.wsp-kpi-tile[tile-type='gauge'] .primary .primary-val { font-size: 240%; margin: 8px 0; font-weight: bold; height: 50%; }
.wsp-kpi-tile[tile-type='gauge'] .primary-gauge { display: inline-block; width: 40%; height: 100%; }

/* http://johnrbell.github.io/Gauge_CSS/ */
.wsp-kpi-tile[tile-type='gauge'] .primary-gauge { position: relative; }
.wsp-kpi-tile[tile-type='gauge'] .primary-gauge .gauge {
    width: 112px;
    height: 56px;
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
    text-align: center;
    transform: translate(-50%, -50%);
}
.wsp-kpi-tile.small .primary-gauge .gauge { width: 84.37px; height: 42px; }
.wsp-kpi-tile.mini .primary-gauge .gauge { width: 63.27px; height: 30px; }
.wsp-kpi-tile .primary-gauge .gauge .gauge-a {
    z-index: 1;
    position: absolute;
    background-color: rgba(255,255,255,.6);
    width: 112px;
    height: 56px;
    top: 0%;
    border-radius: 70.31px 70.31px 0px 0px;
}
.wsp-kpi-tile.small .primary-gauge .gauge .gauge-a { width: 84.37px; height: 42px; }
.wsp-kpi-tile.mini .primary-gauge .gauge .gauge-a { width: 63.27px; height: 30px; }
.wsp-kpi-tile .primary-gauge .gauge .gauge-b {
    z-index: 3;
    position: absolute;
    background-color: #222;
    width: 75px;
    height: 62.5px;
    top: 19.5px;
    margin-left: 19px;
    margin-right: auto;
    border-radius: 70.31px 70.31px 0px 0px;
}
.wsp-kpi-tile.small .primary-gauge .gauge .gauge-b { width: 56.25px; height: 46.87px; margin-left: 14.62px; top: 14.62px; }
.wsp-kpi-tile.mini .primary-gauge .gauge .gauge-b { width: 42.18px; height: 35.15px; margin-left: 10.96px; top: 10.96px; }
.wsp-kpi-tile .primary-gauge .gauge .gauge-c {
    z-index: 2;
    position: absolute;
    background-color: #ed2626;
    width: 112px;
    height: 56px;
    top: 56px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 0px 0px 55.5px 55.5px;
    transform-origin: center top;
    transition: all 1.3s ease-in-out;
}
.wsp-kpi-tile.small .primary-gauge .gauge .gauge-c { width: 84.37px; height: 42px; top: 42px; }
.wsp-kpi-tile.mini .primary-gauge .gauge .gauge-c { width: 63.27px; height: 31.5px; top: 32px; }



.wsp-kpi-tile.small[tile-type='default'] .primary { text-align: left; margin: 6px 0; }
.wsp-kpi-tile.small[tile-type='default'] .primary .primary-lbl { display: inline-block; font-size: 120%; width: 70%; }
.wsp-kpi-tile.small[tile-type='default'] .primary .primary-val { display: inline-block; font-size: 160%; width: 20%; font-weight: bold; margin: 0 0 0 8px; }

.wsp-kpi-tile.small[tile-type='label-single'] .primary { text-align: left; margin: 6px 0; }
.wsp-kpi-tile.small[tile-type='label-single'] .primary .primary-lbl { display: inline; font-size: 120%; }
.wsp-kpi-tile.small[tile-type='label-single'] .primary .primary-val { display: inline; font-size: 160%; font-weight: bold; margin: 0 0 0 8px; }

.wsp-kpi-tile.small[tile-type='label-compare'] .primary { text-align: center; }
.wsp-kpi-tile.small[tile-type='label-compare'] .primary .primary-lbl { display: inline; font-size: 120%; }
.wsp-kpi-tile.small[tile-type='label-compare'] .primary .primary-val { display: inline; font-size: 140%; font-weight: bold; margin: 0 0 0 8px; }
.wsp-kpi-tile.small[tile-type='label-compare'] .secondary { text-align: center; }
.wsp-kpi-tile.small[tile-type='label-compare'] .secondary .secondary-lbl { display: inline; }
.wsp-kpi-tile.small[tile-type='label-compare'] .secondary .secondary-val { display: inline; margin: 0 6px; font-weight: bold; }

.wsp-kpi-tile.small[tile-type='gauge'] .primary .primary-lbl { font-size: 110%; }
.wsp-kpi-tile.small[tile-type='gauge'] .primary .primary-val { font-size: 120%; margin: 3px 0; font-weight: bold; }

.wsp-kpi-tile.small[tile-type='breakeven'] .primary-gauge { height: 14px; margin: 12px 0 0 0; }
.wsp-kpi-tile.small[tile-type='breakeven'] .primary-gauge .min, .wsp-kpi-tile.small[tile-type='breakeven'] .primary-gauge .max, .wsp-kpi-tile.small[tile-type='breakeven'] .primary-gauge .mid, .wsp-kpi-tile.small[tile-type='breakeven'] .primary-gauge .mid-val {
    height: 210%;
    font-size: 80%;
}
.wsp-kpi-tile.small[tile-type='breakeven'] .primary-gauge .mid { height: 100%; }

.wsp-kpi-tile.small[tile-type^='trend'] .primary-trend { height: 60%; }

.wsp-kpi-tile.mini[tile-type='default'] .primary { text-align: left; margin: 6px 0; }
.wsp-kpi-tile.mini[tile-type='default'] .primary .primary-lbl { display: inline-block; font-size: 120%; width: 70%; }
.wsp-kpi-tile.mini[tile-type='default'] .primary .primary-val { display: inline-block; font-size: 160%; width: 20%; font-weight: bold; margin: 0 0 0 8px; }

.wsp-kpi-tile.mini[tile-type='label-single'] .primary { text-align: left; margin: 6px 0; }
.wsp-kpi-tile.mini[tile-type='label-single'] .primary .primary-lbl { display: inline; font-size: 120%; }
.wsp-kpi-tile.mini[tile-type='label-single'] .primary .primary-val { display: inline; font-size: 160%; font-weight: bold; margin: 0 0 0 8px; }

.wsp-kpi-tile.mini[tile-type='label-compare'] .primary { text-align: center; }
.wsp-kpi-tile.mini[tile-type='label-compare'] .primary .primary-lbl { display: inline; font-size: 110%; }
.wsp-kpi-tile.mini[tile-type='label-compare'] .primary .primary-val { display: inline; font-size: 130%; font-weight: bold; margin: 0 0 0 8px; }
.wsp-kpi-tile.mini[tile-type='label-compare'] .secondary { text-align: center; }
.wsp-kpi-tile.mini[tile-type='label-compare'] .secondary .secondary-lbl { display: inline; }
.wsp-kpi-tile.mini[tile-type='label-compare'] .secondary .secondary-val { display: inline; margin: 0 6px; font-weight: bold; }

.wsp-kpi-tile.mini[tile-type='gauge'] .primary .primary-lbl { font-size: 110%; }
.wsp-kpi-tile.mini[tile-type='gauge'] .primary .primary-val { font-size: 120%; margin: 0; font-weight: bold; }

.wsp-kpi-tile.mini[tile-type='breakeven'] .primary .primary-lbl { font-size: 110%; }
.wsp-kpi-tile.mini[tile-type='breakeven'] .primary .primary-val { font-size: 130%; }
.wsp-kpi-tile.mini[tile-type='breakeven'] .primary-gauge { height: 14px; margin: 5px 0 0 0; }
.wsp-kpi-tile.mini[tile-type='breakeven'] .primary-gauge .min, .wsp-kpi-tile.mini[tile-type='breakeven'] .primary-gauge .max, .wsp-kpi-tile.mini[tile-type='breakeven'] .primary-gauge .mid, .wsp-kpi-tile.mini[tile-type='breakeven'] .primary-gauge .mid-val {
    height: 100%;
    font-size: 80%;
}
.wsp-kpi-tile.mini[tile-type='breakeven'] .primary-gauge .mid { display: none; }

.wsp-kpi-tile.mini[tile-type^='trend'] .primary .primary-lbl { font-size: 110%; }
.wsp-kpi-tile.mini[tile-type^='trend'] .primary .primary-val { font-size: 130%; }
.wsp-kpi-tile.mini[tile-type^='trend'] .primary-trend { height: 35%; margin: 5px 0 0 0; }


/* Modal dialogs responsive heights */
@media ( min-height: 200px ) { .wsp-kpi-tile-dialog table { max-height: 50px !important; overflow-y: auto; } }
@media ( min-height: 330px ) { .wsp-kpi-tile-dialog table { max-height: 280px !important; overflow-y: auto; } }
@media ( min-height: 600px ) { .wsp-kpi-tile-dialog table { max-height: 400px !important; overflow-y: auto; } }
@media ( min-height: 720px ) { .wsp-kpi-tile-dialog table { max-height: 500px !important; overflow-y: auto; } }
@media ( min-height: 900px ) { .wsp-kpi-tile-dialog table { max-height: 600px !important; overflow-y: auto; } }
.wsp-kpi-tile-dialog table th { white-space: nowrap; }